<template>
  <div>
    <div class="m-3 p-3 bg-white">
      <a-spin :spinning="confirmLoading">
        <a-list
          style="margin-left: 20px"
          :grid="{ gutter: 16, xs: 1, sm: 1, md: 2, lg: 3, xl: 4, xxl: 5 }"
          :data-source="channelConfigs"
        >
          <template #renderItem="{ item }">
            <a-card hoverable style="max-width: 200px; margin-bottom: 20px" @click="setting(item)">
              <template #cover>
                <a-image
                  style="width: 150px; height: 150px; margin-top: 20px"
                  :preview="false"
                  :src="getIcon(item.channel)"
                  :fallback="fallbackImg"
                />
              </template>
              <a-card-meta style="display: flex; justify-content: space-between" :title="item.name">
                <template #description>
                  <template v-if="item.enable">
                    <a-badge dot color="green" />
                    <span style="color: green">已启用</span>
                  </template>
                  <template v-else-if="item.enable === false">
                    <a-badge dot color="red" />
                    <span style="color: red">未启用</span>
                  </template>
                  <template v-else>
                    <a-badge dot color="grey" />
                    <span style="color: grey">未配置</span>
                  </template>
                </template>
              </a-card-meta>
            </a-card>
          </template>
        </a-list>
      </a-spin>
    </div>
    <IsvChannelConfigEdit ref="channelConfigEdit" @ok="query" />
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { findAll, IsvChannelConfig } from './IsvChannelConfig.api'
  import { ChannelEnum } from '@/enums/daxpay/daxpayEnum'
  import alipay from '@/assets/daxpay/alipay.svg'
  import wechat from '@/assets/daxpay/wechat.svg'
  import unionPay from '@/assets/daxpay/unionPay.svg'
  import leshua from '@/assets/daxpay/leshua.svg'
  import IsvChannelConfigEdit from './IsvChannelConfigEdit.vue'
  import vbillPay from '@/assets/daxpay/vbillPay.svg'
  import hkrtPay from '@/assets/daxpay/hkrtPay.svg'

  const confirmLoading = ref(false)
  const channelConfigs = ref<IsvChannelConfig[]>([])

  const channelConfigEdit = ref<any>()

  // 默认图片的base64值
  const fallbackImg =
    ''

  /**
   * 初始化并展示
   */
  onMounted(() => {
    query()
  })

  /**
   * 查询
   */
  function query() {
    // 列表信息
    confirmLoading.value = true
    findAll().then(({ data }) => {
      channelConfigs.value = data
      confirmLoading.value = false
    })
  }

  /**
   * 打开支付设置界面
   */
  function setting(record: IsvChannelConfig) {
    channelConfigEdit.value.show(record)
  }

  /**
   * 获取icon
   */
  function getIcon(type: string) {
    switch (type) {
      case ChannelEnum.ALI:
        return alipay
      case ChannelEnum.ALI_ISV:
        return alipay
      case ChannelEnum.WECHAT:
        return wechat
      case ChannelEnum.WECHAT_ISV:
        return wechat
      case ChannelEnum.UNION_PAY:
        return unionPay
      case ChannelEnum.LESHUA_PAY:
        return leshua
      case ChannelEnum.VBILL_PAY:
        return vbillPay
      case ChannelEnum.HKRT_PAY:
        return hkrtPay
      default:
        return ''
    }
  }
</script>

<style scoped lang="less">
  :deep(.ant-card-meta-title) {
    display: flex;
    justify-content: center;
  }
  :deep(.ant-image) {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  :deep(.ant-card-meta-description) {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
